// 我的考试页面
<template>
  <div id="myExam">
    <div class="title"></div>
    <div class="wrapper bg-white rounded-3xl mb-8">
      <ul class="top">
        <li class="order">
          <el-badge :value="num_all" class="item" type="primary">
            <span  @click="getExamInfo" >全部</span>
          </el-badge>
        </li>
        <li class="order">
          <el-badge :value="num_nots" class="item" type="primary">
            <span @click="showNotStarted">未开始</span>
          </el-badge>
        </li>
        <li class="order">
          <el-badge :value="num_s" class="item" type="primary">
            <span @click="showStarted">已开始</span>
          </el-badge>
        </li>
        <li class="order">
          <el-badge :value="num_o" class="item">
            <span @click="showOverdue">已过期</span>
          </el-badge>
        </li>
        <li class="search-li">
          <div class="icon">
            <input
              type="text"
              placeholder="试卷名称"
              class="search"
              v-model="key"
            /><i class="el-icon-search"></i>
          </div>
        </li>
        <li>
          <el-button type="primary" @click="search()">搜索试卷</el-button>
        </li>
      </ul>
      <ul class="paper" v-loading="loading">
        <li
          class="item"
          v-for="(item, index) in pagination.records"
          :key="index"
        >
          <h4 @click="toExamMsg(item.examCode)">{{ item.source }}</h4>
          <span class="name">{{ item.source }}-{{ item.description }}</span>
          <p class="text-gray-400 text-xs">开始时间：{{ item.startTime }}</p>
          <p class="text-gray-400 text-xs">结束时间：{{ item.endTime }}</p>
          <div class="info">
            <!-- <i class="el-icon-loading"></i
            > -->
            <!-- <span>{{ item.examDate.substr(0, 10) }}</span> -->
            <i class="iconfont icon-icon-time"></i
            ><span v-if="item.totalTime != null"
              >限时{{ item.totalTime }}分钟</span
            >
            <i class="iconfont icon-fenshu"></i
            ><span>满分{{ item.totalScore }}</span>
          </div>
        </li>
      </ul>
      <div class="pagination">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pagination.current"
          :page-sizes="[6, 10, 20, 40]"
          :page-size="pagination.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pagination.total"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import format from "../../plugins/format";
export default {
  // name: 'myExam'
  data() {
    return {
      num_all: null, //全部试卷
      num_nots: null, //未开始的试卷数
      num_s: null, //已开始的试卷数
      num_o: null, //已过期的试卷数
      loading: false,
      key: null, //搜索关键字
      allExam: null, //所有考试信息

      pagination: {
        //分页后的考试信息
        current: 1, //当前页
        total: null, //记录条数
        size: 6, //每页条数
      },
    };
  },
  created() {
    this.getExamInfo();
    this.getTime();
    this.getNumber();
    this.loading = true;
  },
  // watch: {

  // },
  methods: {
    //获取当前时间
    getTime() {
      var date = new Date(); //创建时间对象
      var year = date.getFullYear(); //获取年
      var month = date.getMonth() + 1; //获取月
      var day = date.getDate(); //获取当日
      var hour = date.getHours();
      var minute = date.getMinutes();
      var seconds = date.getSeconds();
      var currentTime =
        year +
        "-" +
        month +
        "-" +
        day +
        " " +
        hour +
        ":" +
        minute +
        ":" +
        seconds; //组合时间
      return currentTime;
    },
    //获取标签上的考试数
    getNumber() {
        var current_time = this.getTime();
      this.$axios("/api/exams").then((res) => {
        if (res.data.code == 200) {
          let allExam = res.data.data;
          this.num_all = res.data.data.length;
          this.num_nots = 0;
          this.num_s = 0;
          this.num_o = 0;
          allExam.forEach((item) => {
            let flag = this.CompareDate(
              item.startTime.replace(/-/g, "/"),
              item.endTime.replace(/-/g, "/"),
              current_time.replace(/-/g, "/")
            );
            if (flag === 1) {
              this.num_nots++;
            }
            if (flag === 2) {
              this.num_s++;
            } else {
              this.num_o++;
            }
          });
        }
      });
    },
    //获取当前所有考试信息
    getExamInfo() {
      this.$axios(
        `/api/exams/${this.pagination.current}/${this.pagination.size}`
      )
        .then((res) => {
          this.pagination = res.data.data;
          this.loading = false;
          console.log('1',this.pagination);
        })
        .catch((error) => {
          console.log(error);
        });
    },
    //改变当前记录条数
    handleSizeChange(val) {
      
      this.pagination.size = val;
      this.getExamInfo();
    },
    //改变当前页码，重新发送请求
    handleCurrentChange(val) {
      this.pagination.current = val;
      this.getExamInfo();
    },

    //  对所有试卷的日期与当前日期相比较
    //  d1:startTime考试开始时间
    //  d2:endTime考试结束时间
    //  d3:currentTime当前时间
    CompareDate(d1, d2, d3) {
      //当前时间d3<考试开始时间d1 :未开始
      if (new Date(d3) < new Date(d1)) {
        return 1;
      }
      //开始时间d1<当前时间d3<考试结束时间d2  :已开始
      if (new Date(d1) < new Date(d3) && new Date(d3) < new Date(d2)) {
        return 2;
      }
      //已过期
      else {
        return 3;
      }
    },

    //点击未开始，筛选还没进行的考试
    showNotStarted() {
      var current_time = this.getTime();
      this.$axios("/api/exams").then((res) => {
        if (res.data.code == 200) {
          let allExam = res.data.data;
     
          let newPage = allExam.filter((item) => {
            // return item.source.includes(this.key);
            let flag = this.CompareDate(
              item.startTime.replace(/-/g, "/"),
              item.endTime.replace(/-/g, "/"),
              current_time.replace(/-/g, "/")
            );
            if (flag === 1) {
              console.log('source',item.source.includes(item.source))
              return item.source.includes(item.source);
            }
          });
          this.pagination.records = newPage;
          this.pagination.total=newPage.length;
          this.pagination.size=6;
               console.log( 'this.pagination', newPage.length)
         
        }
      });
    },

    //点击已开始，筛选已经进行的考试
    showStarted() {
      var current_time = this.getTime();
      // var current_time = "2021-04-01"; //当前时间
      //对所有试卷的日期与当前日期相比较

      this.$axios("/api/exams").then((res) => {
        if (res.data.code == 200) {
          let allExam = res.data.data;
          // this.num_s = 0;
          let newPage = allExam.filter((item) => {
            // return item.source.includes(this.key);
            let flag = this.CompareDate(
              item.startTime.replace(/-/g, "/"),
              item.endTime.replace(/-/g, "/"),
              current_time.replace(/-/g, "/")
            );
            if (flag === 2) {
        console.log('source',item.source.includes(item.source))
              return item.source.includes(item.source);
            }
          });
          this.pagination.records = newPage;
           this.pagination.total=newPage.length
           this.pagination.size=6;
               console.log( 'this.pagination', newPage)
        }
      });
    },
    //展示已过期的试卷
    showOverdue() {
      var current_time = this.getTime();
      this.$axios("/api/exams").then((res) => {
        if (res.data.code == 200) {
          let allExam = res.data.data;
          // this.num_o = 0;
          let newPage = allExam.filter((item) => {
            // return item.source.includes(this.key);
            let flag = this.CompareDate(
              item.startTime.replace(/-/g, "/"),
              item.endTime.replace(/-/g, "/"),
              current_time.replace(/-/g, "/")
            );
            if (flag === 3) {
              return item.source.includes(item.source);
            }
          });
          this.pagination.records = newPage;
           this.pagination.total=newPage.length
               console.log( 'this.pagination', newPage.length)
        }
      });
    },
    //搜索试卷
    search() {
      this.$axios("/api/exams").then((res) => {
        if (res.data.code == 200) {
          let allExam = res.data.data;
          let newPage = allExam.filter((item) => {
            return item.source.includes(this.key);
          });
          this.pagination.records = newPage;
        }
      });
    },
    //跳转到试卷详情页
    toExamMsg(examCode) {
      this.$router.push({ path: "/examMsg", query: { examCode: examCode } });
      console.log(examCode);
    },
  },
};
</script>


<style lang="scss" scoped>
.pagination {
  padding: 20px 0px 30px 0px;
  .el-pagination {
    display: flex;
    justify-content: center;
  }
}
.paper {
  h4 {
    cursor: pointer;
  }
}
.paper .item a {
  color: #000;
}
.wrapper .top .order {
  cursor: pointer;
}
.wrapper .top .order:hover {
  color: #0195ff;
  border-bottom: 2px solid #0195ff;
}
.wrapper .top .order:visited {
  color: #0195ff;
  border-bottom: 2px solid #0195ff;
}
.item .info i {
  margin-right: 5px;
  color: #0195ff;
}
.item .info span {
  margin-right: 14px;
}
.paper .item {
  width: 380px;
  border-radius: 4px;
  padding: 20px 30px;
  border: 1px solid #eee;
  box-shadow: 0 0 4px 2px rgba(217, 222, 234, 0.3);
  transition: all 0.6s ease;
}
.paper .item:hover {
  box-shadow: 0 0 4px 2px rgba(140, 193, 248, 0.45);
  transform: scale(1.03);
}
.paper .item .info {
  font-size: 14px;
  color: #88949b;
}
.paper .item .name {
  font-size: 14px;
  color: #88949b;
}
.paper * {
  margin: 20px 0;
}
.wrapper .paper {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}
.top .el-icon-search {
  position: absolute;
  right: 10px;
  top: 10px;
}
.top .icon {
  position: relative;
}
.wrapper .top {
  border-bottom: 1px solid #eee;
  margin-bottom: 20px;
}
#myExam .search-li {
  margin-left: auto;
}
.top .search-li {
  margin-left: auto;
}
.top li {
  display: flex;
  align-items: center;
}
.top .search {
  margin-left: auto;
  padding: 10px;
  border-radius: 4px;
  border: 1px solid #eee;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}
.top .search:hover {
  color: #0195ff;
  border-color: #0195ff;
}
.wrapper .top {
  display: flex;
}
.wrapper .top li {
  margin: 20px;
}
#myExam {
  width: 980px;
  margin: 0 auto;
}
#myExam .title {
  margin: 20px;
}
#myExam .wrapper {
  background-color: #fff;
}
.wrapper .top .order {
  cursor: pointer;
}
.wrapper .top .order:hover {
  color: #0195ff;
  border-bottom: 2px solid #0195ff;
}
.wrapper .top .order:visited {
  color: #0195ff;
  border-bottom: 2px solid #0195ff;
}
.item .info i {
  margin-right: 5px;
  color: #0195ff;
}
.item .info span {
  margin-right: 14px;
}
.paper .item {
  border-radius: 4px;
  padding: 20px 30px;
  border: 1px solid #eee;
  box-shadow: 0 0 4px 2px rgba(217, 222, 234, 0.3);
  transition: all 0.6s ease;
}
.paper .item:hover {
  box-shadow: 0 0 4px 2px rgba(140, 193, 248, 0.45);
}
.paper .item .info {
  font-size: 14px;
  color: #88949b;
}
.paper .item .name {
  font-size: 14px;
  color: #88949b;
}
.paper * {
  margin: 20px 0;
}
.wrapper .paper {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}
.top .el-icon-search {
  position: absolute;
  right: 10px;
  top: 10px;
}
.top .icon {
  position: relative;
}
.wrapper .top {
  border-bottom: 1px solid #eee;
}
#myExam .search-li {
  margin-left: auto;
}
.top .search-li {
  margin-left: auto;
}
.top li {
  display: flex;
  align-items: center;
}
.top .search {
  margin-left: auto;
  padding: 10px;
  border-radius: 4px;
  border: 1px solid #eee;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}
.top .search:hover {
  color: #0195ff;
  border-color: #0195ff;
}
.wrapper .top {
  display: flex;
}
.wrapper .top li {
  margin: 20px;
}
#myExam {
  width: 980px;
  margin: 0 auto;
}
#myExam .title {
  margin: 20px;
}
#myExam .wrapper {
  background-color: #fff;
}
</style>
